<template>
	<view class="flex">
		<zh-sheet :margin="[0,8]" :padding="[16]" :shadow="1" :round="2" :border="1" v-for="(item,index) in files"
			:key="index">
			<view class="flex flex-row flex-row-center-between ">
				<view @click="emits('click',item)" class="flex flex-col " style="width:85%">
					<zh-text :font-size="28" _class="wrap" class="flex-1 wrap mb-5" :label="item.name"></zh-text>
					<zh-text :font-size="24" :line-height="0"
						:color="item.statusCode==STATUS_CODE.fail||item.statusCode==STATUS_CODE.max?'red':(item.statusCode==STATUS_CODE.success?'green':'')"
						:label="item.status"></zh-text>
				</view>
				<tm-icon v-if="!_disabledRemove&&!_disabled" @click="remove(index)" class="pl-32 flex-shrink"
					color="red" name="tmicon-times"></tm-icon>
			</view>
		</zh-sheet>

		<zh-sheet :class="_disabled?'opacity-5':''" :followTheme="props.followTheme" :color="props.color" text
			:margin="[0,8]" :padding="[16]" :round="2" :border="1" v-if="!isLimitCount">
			<view @click="chooseFile" class="flex flex-row flex-row-center-center">
				<tm-icon name="tmicon-plus"></tm-icon>
				<zh-text class="pl-16" label="添加文件"></zh-text>
			</view>
		</zh-sheet>
	</view>
</template>
<script lang="ts" setup>
	/**
 * 文件上传
 * @description 不支持nvue,只支持h5,web,微信，qq,字节，飞书相关平台
 */
	import { computed, ref, PropType, Ref, watch, toRaw, nextTick, getCurrentInstance, inject, reactive, onMounted, isRef, isProxy, watchEffect } from 'vue'
	import { inputPushItem, rulesItem } from './../zh-form-item/interface'
	import { USE_UPLOAD_FILE_CONFIG_TYPE, useUploadFile, FILE_TYPE, STATUS_CODE } from '@/tool/useFun/useUploadFile'

	import { emit } from 'cluster';
	const { config, files, isLimitCount, choose, remove, addFile, addEventListener, uploading } = useUploadFile(null)
	const proxy = getCurrentInstance()?.proxy ?? null

	const props = defineProps({
		//是否跟随全局主题的变换而变换
		followTheme: {
			type: [Boolean, String],
			default: true
		},
		defaultValue: {
			type: Array as PropType<Array<any>>,
			default: () => []
		},
		//可以是双向绑定
		modelValue: {
			type: Array as PropType<Array<any>>,
			default: () => []
		},
		color: {
			type: String,
			default: 'primary'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		/** 禁用删除功能 */
		disabledRemove: {
			type: Boolean,
			default: false
		},
		/** 当前的上传状态可v-model:uploading,仅单向向外输入状态，不接受双向绑定，通过这个状态来知当前是否所有文件上传完成还是正在运行中。 */
		uploading: {
			type: Boolean,
			default: false
		},
		config: {
			type: Object as PropType<{
				/**media表示只允许图片或者视频选择，file表示允许任意文件，但只支持h5,微信平台  */
				uploadType ?: "media" | "file",
				maxCount ?: number,//文件最大数量。
				extension ?: string[],//文件选择的类型。
				type ?: "all" | "image" | "video" | "file" | undefined,
				/**只对h5 */
				sourceType ?: Array<'album' | 'camera'>,
				maxSize ?: number,//每一个文件上传的最大尺寸，默认为10mb
				hostUrl ?: string,//上传文件的服务器地址
				autoUpload ?: boolean,
				header ?: { [key : string] : any },//头部参数。
				formData ?: { [key : string] : any },//额外的表单数据。
				formName ?: string,
				code ?: number,//服务器响应码，如果不为此码，表示上传失败。
				maxDuration ?: number,//如果选择的类型是视频，可以定制此拍摄的最大时长。仅uploadType为media时有效
				sizeType ?: Array<'original' | 'compressed'>,//仅对 mediaType 为 image 时有效，是否压缩所选文件,仅uploadType为media时有效
				camera ?: 'back' | 'front',//仅在 sourceType 为 camera 时生效，使用前置或后置摄像头,仅uploadType为media时有效
				mediaType ?: Array<'image' | 'video'>,//注意当uploadType=media时，如果是微信，抖音，飞书这里可以为当前正常类型值；如果是其它平台：只取数组中第一个值，比如要选择图片设置为["image"],视频：["video"],仅uploadType为media时有效
			}>,
			default: () => {
				return {};
			}
		}

	})

	const emits = defineEmits(['update:modelValue', 'update:uploading', 'click'])
	let timeId : any = NaN
	const _disabled = computed(() => props.disabled);
	const _disabledRemove = computed(() => props.disabledRemove);
	addEventListener('change', () => {
		emits('update:uploading', uploading.value)
	})

	function chooseFile() {
		if (_disabled.value) return;
		choose('file');
	}
	watchEffect(() => {
		config.value = uni.$tm.u.deepObjectMerge(uni.$tm.u.deepClone(config.value), props.config);
	})
	onMounted(() => {
		initDefault();
	})


	function initDefault() {
		addFile(props.modelValue);
		emits('update:modelValue', uni.$tm.u.deepClone(files.value))
	}
</script>